<template>
	<div class="vdiv">
		<video-player class="video-player vjs-custom-skin " ref="videoPlayer" :playsinline="true"
			:options="playerOptions" @paly="onPlayerpaly($event)"></video-player>
		<div class="reportBox" v-if="reportText">
			<div class="lbBox">
				<img class="lbBoxImg" src="../../assets/images/laba.png" />
			</div>
 			<div class="report">
				{{$store.state.terminfo.reportWordk}}
			</div>
		</div>
	</div>
</template>

<script>
	import {
		videoPlayer
	} from "vue-video-player";
	import "video.js/dist/video-js.css";
	import a from '../../assets/images/back.png'
	export default {
		name: "VideoPlayer",
		data() {
			return {
				playerOptions: {
					live: true,
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoplay: true, //如果true,浏览器准备好时开始回放。
					muted: true, // 默认情况下将会消除任何音频。
					loop: true, // 导致视频一结束就重新开始。
					preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: "zh-CN",
					aspectRatio: "", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [
						// {
						// 	// src: this.$store.state.terminfo.seceninfo.updateurl, // 路径
						// 	// src:,
						// 	src: 'http://image.eaccessy.com/a931648c-8324-46eb-9032-8baf46ba3978.mp4',
						// 	type: "video/mp4" // 类型
						// },
						{
							// type: "video/webm",
							// src:""
							// src: "http://image.eaccessy.com/2a46deb2-e66b-4fbe-b813-6644753229ac.webm", //视频url地址
						}
					],
					poster: a, //你的封面地址
					width: document.documentElement.clientWidth,
					notSupportedMessage: " ", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: false,
						durationDisplay: false,
						remainingTimeDisplay: false,
						fullscreenToggle: false //全屏按钮
					}
				},
				reportText: '本系统将于2021年6月18日至19日升级，请耐心等待，谢谢'
			};
		},
		components: {
			videoPlayer
		},
		methods: {
			onPlayerpaly(play) {
				const myplayer = this.$refs.videoPlayer.player;
				myplayer.play();
			},
			player() {
				return this.$refs.videoPlayer.player;
			}
		},
		methods: {
			onPlayerpaly(play) {

				const myplayer = this.$refs.videoPlayer.player;
				myplayer.play();
			}
		},
		computed: {
			player() {
				return this.$refs.videoPlayer.player;
			}
		},
		created() {
			if (this.reportText) {
				this.playerOptions.aspectRatio = "18:16";
			} else {
				this.playerOptions.aspectRatio = "14:13";
			}

		},
		mounted() {
			// console.log("url=" + this.$store.state.terminfo.seceninfo.videourl);
			//自动播放报错，谷歌浏览器问题
			// this.onPlayerpaly(this.$refs.videoPlayer.player);
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss">
	.el-icon-loading {
		font-size: 54px;
	}


	.videoBox {
		width: 100%;
		height: 100%;
	}

	.vjs-error-display::before {
		content: '' !important;
	}

	.vjs-poster {
		width: 100%;
		background-size: auto;
	}

	@media (min-height: 0px) and (max-height: 1910px) {
		.reportBox {
			display: none;
		}
	}

	@media (min-height: 1919px) {

		
		.reportBox {
			height: 80px;
			display: flex;
			background-color: #FFFFFF;
			position: relative;
			.lbBox {
				padding-left: 53px;
				padding-right: 23px;
				height: 80px;
				z-index: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFFFFF;
		
				.lbBoxImg {
					width: 35px;
					height: 31px;
				}
			}
		
			.report {
				display: flex;
				justify-content: center;
				align-content: center;
				font-size: 38px;
				font-family: Source Han Sans CN;
				font-weight: 300;
				color: #FA9E58;
				text-align: left;
				cursor: pointer;
				display: inline-block;
				font-weight: bold;
				white-space: nowrap;
				animation: 15s wordsLoop linear infinite normal;
				z-index: 1;
				line-height: 80px;
				padding-left: 100%;
			}
		}
	}






	@keyframes wordsLoop {
		0% {
			transform: translateX(20px);
			-webkit-transform: translateX(20px);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}

	@-webkit-keyframes wordsLoop {
		0% {
			transform: translateX(20px);
			-webkit-transform: translateX(20px);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
			background-color: #5C7C99;
		}
	}
</style>

<style>
	.video-js .vjs-modal-dialog{
		background: none !important;
	}
</style>
